<template>
  <div class="itemize">
    <van-tree-select
      height="100%"
      :items="items"
      :main-active-index.sync="active"
      style="position: fixed"
    >
      <template #content>
        <div v-for="(item, index) in list" :key="item.cat_id">
          <div v-if="active === index">
            <div v-for="title in item.children" :key="title.cat_id">
              <p class="title_name">{{ title.cat_name }}</p>
              <van-grid :column-num="3">
                <van-grid-item
                  @click="goHere(image.cat_name)"
                  v-for="image in title.children"
                  :key="image.cat_id"
                  :text="image.cat_name"
                >
                  <template #icon
                    ><img :src="image.cat_icon" alt="" class="grid_image"
                  /></template>
                </van-grid-item>
              </van-grid>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { getlist } from '@/api/itemize'
export default {
  data() {
    return {
      active: 0,
      items: [],
      list: []
    }
  },
  methods: {
    async getlist() {
      const res = await getlist()
      this.list = res.data.message
      this.list.forEach((item) => {
        this.items.push({ text: item.cat_name })
      })
    },
    goHere(name) {
      this.$router.push('/itemize' + '/' + name)
    }
  },
  created() {
    this.getlist()
  }
}
</script>
<style lang="scss" scoped>
.itemize {
  .van-sidebar {
    width: 330px;
  }
  .van-tree-select__content {
    flex: 3;
  }
  .title_name {
    height: 50px;
    margin: 0px;
    font-size: 18px;
    line-height: 50px;
    // background-color: #f7f8fa;
    text-indent: 30px;
  }
  .van-grid-item__content--center {
    .grid_image {
      width: 40px;
      height: 40px;
    }
  }
}
</style>